<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .tooltip{
        position: absolute;
        top: -60px;
        left: 10px;
        background: #fff;
        min-width: 150px;
        border-radius: 4px;
        border: 1px solid #ebeef5;
        padding: 12px;
        z-index: 2000;
        color: #606266;
        line-height: 1.4;
        text-align: justify;
        font-size: 14px;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        word-break: break-all;
    }
    .tooltip:before{
        content: "";
        display: block;
        position: absolute;
        bottom: -5px;
        left: 15%;
        height: 0;
        width: 0;
        border-top: 5px solid #ffffff;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
    }
</style>
<body>
<div style="position: relative">
    <div style="width: 20px;height: 20px;background: red;margin-top: 100px">123456</div>
    <div class="tooltip">
        这是一段提示内容
    </div>
</div>

</body>
</html>